<template>
	<div class="tabelContainer">
		<basic-container>
			<div>
				<el-form :inline="true" class="demo-form-inline p_form">
					<el-form-item label="项目:">
						<el-select placeholder="请选择所属项目" size="small" v-model="query.deptInfoId">
							<el-option :label="item.deptName" :value="item.id" v-for="(item,index) in deptInfoList" :key="index"></el-option>
						</el-select>
					</el-form-item>
					<!--<el-form-item label="通道名称:">
						<el-input placeholder="请输入通道名称" size="small" v-model="query.channelName"></el-input>
					</el-form-item>-->

					<el-form-item>
						<el-button type="primary" @click="search" size="small" icon="el-icon-search">搜索</el-button>
						<el-button size="small" @click="cancle" icon="el-icon-delete">清空</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div>
				<el-form :inline="true" class="demo-form-inline p_form">
					<el-form-item>
						<el-button type="primary" @click="add" size="small" icon="el-icon-plus" v-if="permissionList.addBtn">新建</el-button>
						<el-button type="danger" @click="handleDelete" size="small" plain icon="el-icon-delete" v-if="permissionList.delBtn">删除</el-button>
					</el-form-item>
				</el-form>
			</div>
			<avue-crud :data="data" :option="option" ref="crud" :page.sync="page"  v-model="form"
				@on-load="onLoad" :table-loading="loading" @row-save="rowSave" @row-update="rowUpdate" 
				@selection-change="selectionChange">
				<template slot-scope="scope" slot="menu">
					<el-button icon="el-icon-edit" size="small" type="text" @click="edit(scope.row)" v-if="permissionList.editBtn">编辑</el-button>
<!--					<el-button icon="el-icon-view" size="small" type="text" @click="see(scope.row)" v-if="permissionList.viewBtn">查看</el-button>
-->				</template>
			</avue-crud>
		</basic-container>
	</div>
</template>
<script>
	import { getVideoinfo, getDeptInfoList, addOrUpdate, remove, checkChannelNum,getSiteListByDeptInfoId,getExtraInfoByDeptInfoId } from "@/api/dust/videoEquipment";
	import { column, group } from "./option"
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				form:{},
				currentRow: {}, // 检查channelNum 是否重复需要用到
				dataTime: '',
				deptInfoList: [], // 储存所属项目列表
				selectionList: [], // 储蓄选择项，批量删除的时候用到
				loading: false, // 表格请求数据的加载框
				// 查询条件
				query: {
					deptInfoId: '',
					channelName: ''
				},
				page: {
					currentPage: 1,
					total: 0,
					layout: "total,pager,prev,next",
					pageSize: this.$pageSize,
				},
				data: [],
				option: {
					header: false, // 隐藏表格头部
					align: "center",
					tip: false, // 选择控件开启后会有提示框，用不到的话需要去掉
					delBtn: false, // 控制行内删除按钮显隐
					editBtn: false,
					menuWidth: 150,
					selection: true,
					border: true,
					column: column,
					menu: true
				}
			};
		},
		computed: {
			...mapGetters(["permission"]),
			permissionList() {
				return {
					viewBtn: this.permission.videoEquipment_view,
					delBtn: this.permission.videoEquipment_delete,
					editBtn: this.permission.videoEquipment_edit,
					addBtn: this.permission.videoEquipment_add
				};
			},
			ids() {
				let ids = [];
				this.selectionList.forEach(ele => {
					ids.push(ele.id);
				});
				return ids.join(",");
			}			
		},
		watch:{
			'form.deptInfoId' (val) {
				if(!val)return 				
				this.getSiteList(val)
			}
		},
		mounted() {
			this.init()
		},
		methods: {			
			getSiteList(deptInfoId){
				if(!deptInfoId)return false
				getSiteListByDeptInfoId(deptInfoId).then(res=>{
					const siteInfoId = this.findObject(this.option.column, "siteInfoId")
					siteInfoId.dicData = res.data.data					
				})
				getExtraInfoByDeptInfoId(deptInfoId).then(res=>{
					this.form.deptVideoAddress=res.data.data.deptVideoAddress
					this.form.account=res.data.data.account
					this.form.password=res.data.data.password
				})
			},
			add() {
				const siteInfoId = this.findObject(this.option.column, "siteInfoId")
				siteInfoId.dicData = []
				this.$refs.crud.rowAdd()
			},
			edit(row) {
				this.currentRow = row
				
				this.$refs.crud.rowEdit(row, row.$index);
			},
			// 删除按钮操作
			handleDelete() {
				if(this.selectionList.length === 0) {
					this.$message.warning("请选择至少一条数据");
					return;
				}
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}).then(() => {
						return remove(this.ids);
					})
					.then(() => {
						this.onLoad();
						this.$message({
							type: "success",
							message: "操作成功!"
						});
						this.$refs.crud.toggleSelection();
					});
			},
			selectionChange(list) {
				this.selectionList = list;
			},
			init() {
				getDeptInfoList().then(res => {
					
					this.deptInfoList = res.data.data
				})
			},
			cancle() {
				this.page.currentPage = 1;
				this.query = {
						deptInfoId: '',
						channelName: ''
					},
					this.onLoad();
			},
			search() {
				this.page.currentPage = 1;
				this.onLoad();
			},
			see(row) {
				this.$refs.crud.rowView(row, row.$index);
			},
			UpdateRow(row, done, loading) {		
				addOrUpdate(row).then(() => {
					this.onLoad();
					this.$message({
						type: "success",
						message: "操作成功!"
					});
					this.cancle()
					done();
				}, error => {
					loading();
				});
			},
			// 新增按钮执行事件
			rowSave(row, done, loading) {			
				row.siteInfoId=row.siteInfoId.join(',')
				this.UpdateRow(row, done, loading) //去除通道编码校验20201030
			},
			rowUpdate(row, index, done, loading) {
				// 判断是否为数组
				let result=Array.isArray(row.siteInfoId)
				if(result){
					row.siteInfoId=row.siteInfoId.join(',')
				}			
				this.UpdateRow(row, done, loading) //去除通道编码校验20201030
			},
			onLoad() {
				this.loading = true
				let query = {
					deptInfoId: this.query.deptInfoId,
					channelName: this.query.channelName,
					current: this.page.currentPage,
					size: this.page.pageSize
				}
				getVideoinfo(query).then(res => {
					this.loading = false
					this.page.total = res.data.data.total;
					this.data = res.data.data.records
				});
			}
		}
	}
</script>
<style scoped="" lang="scss">
	.tabelContainer{
		.el-form-item{margin-bottom: 8px;}
	}
	.p_form {
		width: 100%;
		margin: 0 auto;
	}
</style>